<template>
	<view class="conter">
		<view class="cduck_box">Duck-蛋:{{ total }}只</view>
		<u-list height="1100rpx">
			<view class="list_duck" v-if="collectionList.length != 0">
				<u-list-item v-for="(item, index) in collectionList" :key="index">
					<view class="min_ducklist">
						<view class="duck_image">
							<image @click="goMonPurchase(item)" :src="imgUrl + item.name" mode="" class="imgsos">
							</image>
						</view>
						<view class="priceo_box">
							<view class="priceotow" v-if="item.createTime > 0">
								<u-count-down :time="item.createTime" format="HH:mm:ss"></u-count-down>
							</view>
							<view class="priceotow1" v-else-if="item.consignmentPrice">￥{{ item.consignmentPrice }}
							</view>
							<view class="priceotow1" v-else>待收取</view>
						</view>
						<view class="duck_buttom">
							<view class="iconviewthreepa">
								<view class="iconviewthree2">
									编号 ：
									<text style="color: #648bd8">#{{ item.number }}</text>
								</view>
								<view class="upper-half">
									{{ item.isHunting == 0 ? '持有' : item.isHunting == 1 ? '交易中' : '上任中' }}
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</view>
			<view v-if="collectionList.length == 0">
				<image style="
	width: 280rpx;
	height: 280rpx;
	margin: 270rpx 220rpx 0;
		" src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</u-list>
	</view>
</template>
<script>
	import {
		pagingQuery
	} from '@/api/venue/venue.js';
	import config from '@/config';
	export default {
		data() {
			return {
				show: false,
				activeIndex: -1,
				collectionList: [],
				page: 1,
				size: 1000, //每页显示条数
				total: 0,
				systemTime: '',
				imgUrl: config.gillUrl,
				status: 'loadmore'
			};
		},
		created() {
			this.getCollectionList();
		},
		onShow() {
			this.getCollectionList();
		},
		watch: {
			$route: function(newRoute, oldRoute) {
				// 判断是否是底部导航切换触发的路由变化
				if (newRoute.path !== oldRoute.path) {
					// 在这里执行你的逻辑
					this.getCollectionList();
				}
			}
		},
		methods: {
			async getCollectionList() {
				let param = {};
				param.page = this.page;
				param.size = this.size;
				param.raceName = ''; //此处数据等待筛选逻辑完成之后再添加
				param.isHunting = -1; // -1代表全部，0代表持有 1代表交易中 2代表狩猎中
				param.birthNumber = -1; // -1代表全部，0代表持有 1代表交易中 2代表狩猎中
				param.mature = 0; //是否是蛋，0蛋，1萌宝，默认为1
				const data = await pagingQuery(param);
				// console.log(data);
				this.collectionList = data.data.res;
				this.systemTime = data.data.systemTime;
				this.collectionList.forEach((order) => {
					const createTime = new Date(order.createTime).getTime() / 1000; // 假设 createTime 是标准时间格式
					const systemTime = this.systemTime; // 假设 this.systemTime 已经是秒级时间戳
					// 计算 createTime 加7天的时间戳
					const sevenDaysLater = createTime + 7 * 24 * 60 * 60; // 7天对应的秒数
					// 计算差值
					const timeDifference = sevenDaysLater - systemTime;
					// console.log(timeDifference); // 输出差值，单位为秒
					order.createTime = Math.floor(timeDifference * 1000);
				});
				// 加载
				this.total = data.data.total;
				// 加载事件
			},
			scrolltolower() {},
			goMonPurchase(item) {
				uni.navigateTo({
					url: `/pages/consignment/cangHouse?mature=${item.mature}&id=${item.id}` // 跳转到目标页面的路径
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	::v-deep .u-count-down__text {
		font-size: 24rpx;
		color: #fff !important;
	}

	.conter {
		padding: 15rpx 34.88rpx;

		.cduck_box {
			width: 181rpx;
			height: 59rpx;
			color: #ffffff;
			font-weight: 500;
			font-size: 24rpx;
			line-height: 60rpx;
			text-align: center;
			background: #211f30;
			font-family: 'font';
			border-radius: 14rpx;
			box-sizing: border-box;
			border: 2rpx solid #3c424d;
		}

		.list_duck {
			width: 680rpx;
			display: flex;
			flex-wrap: wrap;
			margin-top: 42.33rpx;
			justify-content: space-between;

			.min_ducklist {
				width: 318rpx;
				height: 408rpx;
				border-radius: 9rpx;
				margin-bottom: 45.35rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			}

			.duck_image {
				width: 316rpx;
				height: 316rpx;
				position: relative;
				border-top: 1rpx solid #3c424d;
				border-left: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				border-radius: 9rpx 9rpx 0rpx 0rpx;

				image {
					width: 316rpx;
					height: 316rpx;
					background: #648bd8;
					border-radius: 9rpx 9rpx 0rpx 0rpx;
				}
			}

			.priceo_box {
				position: absolute;
				margin-top: -300rpx;
				margin-left: 15rpx;

				.priceotow {
					display: flex;
					align-items: center;
					height: 10rpx;
					font-weight: 800;
					font-size: 24rpx;
					font-family: 'font';
					border-radius: 9rpx;
					padding: 20rpx 10rpx 18rpx 10rpx;
					background: rgba(40, 44, 52, 0.8);
				}

				.priceotow1 {
					color: #fff;
					font-size: 20rpx;
					font-weight: 400;
					text-align: center;
					font-family: 'font';
					border-radius: 9rpx;
					padding: 5rpx 10rpx 5rpx 10rpx;
					background: rgba(40, 44, 52, 0.8);
				}
			}

			.duck_buttom {
				display: flex;
				width: 316rpx;
				height: 110rpx;
				padding: 0 20rpx;
				background: #211f30;
				justify-content: space-between;
				border-left: 1rpx solid #3c424d;
				border-bottom: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				border-radius: 0rpx 0rpx 9rpx 9rpx;

				.iconviewthreepa {
					width: 316rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.iconviewthree2 {
						color: #fff;
						font-size: 24rpx;
						font-weight: 400;
						font-family: 'font';
					}

					.upper-half {
						display: flex;
						height: 40rpx;
						color: #ffffff;
						font-size: 24rpx;
						font-weight: 500;
						font-family: 'font';
						align-items: center;
						border-radius: 8rpx;
						padding: 0 10rpx 0 10rpx;
						background-color: #46a6f8;
					}
				}
			}
		}
	}
</style>